<template>
  <div class="service-wrap">

    <div class="material-box">
      <div class="content-box">
        <span class="title">客服电话：</span>
        <div class="content" @click="callMobile">
          <span>{{cumPhone}}</span>
          <img src="../../images/in.png" class="pic"/>
        </div>
      </div>

      <div class="content-box">
        <span class="title">招聘QQ群：</span>
        <div class="qq-number">{{workQq}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cumPhone: "400-3260-2201",
        workQq: "282501114"
      }
    },
    methods: {
      callMobile() {//客服
        window.location.href = 'tel://' + this.cumPhone;
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .service-wrap {
    .who(100%, 100%, hidden);
    background: @talent-theme-bg-color;
    .material-box {
      .wh(100%, auto);
      background: @talent-bg-color;
      .content-box {
        display: flex;
        align-items: center;
        margin-left: 3.2%;
        .wh(96.8%, 1.333rem);
        border-bottom: @talent-border-bottom;
        &:last-child {
          border-bottom: none;
        }
        .content {
          margin-left: auto;
          padding-right: 0.347rem;
          .size-color(0.427rem, rgba(153, 153, 153, 1));
        }
        .pic {
          padding-left: 0.1rem;
          .wh(0.32rem, 0.32rem)
        }
        .qq-number {
          margin-left: auto;
          padding-right: 0.347rem;
          .size-color(0.427rem, rgba(153, 153, 153, 1));
        }
      }
      .title {
        .size-color(0.427rem, rgba(51, 51, 51, 1));
      }
    }
  }

</style>
